<template>
  <div class="app-container dialog">
    <div class="title">新增上云系统</div>
    <div class="msg">
      <el-form :model="cloudSystem" ref="cloudSystem" style="width: 100% !important" :rules="rules" label-width="120px">
        <div class="wrap" style="margin-top: 20px">
          <div class="item">
            <el-form-item label="项目:" prop="projectname">
              <el-select
                v-model="cloudSystem.projectid"
                filterable
                @change="changeprojectList"
                style="width: 200px"
                placeholder="请选择项目"
              >
                <el-option v-for="item in projectLists" :key="item.id" :label="item.projectname" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="云服务商:" prop="supplierCode">
              <el-select
                v-model="cloudSystem.supplierCode"
                @change="changecloudSupplier"
                style="width: 200px"
                placeholder="请选择云服务商"
              >
                <el-option
                  v-for="item in logicListALL"
                  :key="item.cloudSupplier"
                  :label="item.cloudSupplierName"
                  :value="item.cloudSupplier"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="系统名称:" prop="projectname">
              <el-input
                style="width: 200px"
                size="mini"
                placeholder="请输入系统名称"
                v-model="cloudSystem.projectname"
                clearable
              >
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="上线时间:" prop="onlinetime">
              <el-date-picker
                v-model="cloudSystem.onlinetime"
                type="date"
                style="width: 200px"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="请选择上线时间"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="等保:">
              <el-select v-model="cloudSystem.protectLevel" placeholder="请选择" size="mini" style="width: 200px">
                <el-option
                  v-for="item in available_domain"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="业务部门:" prop="officeId">
              <el-cascader
                :props="{ value: 'id', checkStrictly: true }"
                :show-all-levels="false"
                @change="deptChange"
                style="width: 200px"
                v-model="cloudSystem.officeId"
                placeholder="请选择，可搜索"
                :options="dept"
                clearable
                filterable
              ></el-cascader>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="业主方联系人:" prop="contacts">
              <el-select
                clearable
                style="width: 200px"
                v-model="cloudSystem.contacts"
                :placeholder="cloudSystem.officeId ? '请选择业主方联系人' : '请先选择业务部门'"
              >
                <el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="上云区域:" prop="cloudUpArea">
              <el-select v-model="cloudSystem.cloudUpArea" placeholder="请选择" style="width: 200px">
                <el-option
                  v-for="item in cloud_up_areaList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="联系电话:" prop="contactsinfo">
              <el-input style="width: 200px" placeholder="请输入联系电话" v-model="cloudSystem.contactsinfo" clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="邮箱:" prop="email">
              <el-input style="width: 200px" placeholder="请输入邮箱" v-model="cloudSystem.email" clearable> </el-input>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <!-- prop="constunit" -->
            <el-form-item label="承建单位:">
              <el-input style="width: 200px" placeholder="请选择承建单位" v-model="cloudSystem.constunit" clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <!-- prop="constcts" -->
            <el-form-item label="承建方联系人:">
              <el-input style="width: 200px" placeholder="请输入承建方联系人" v-model="cloudSystem.constcts" clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <!-- prop="constctsinfo" -->
            <el-form-item label="联系电话:">
              <el-input style="width: 200px" placeholder="请输入联系电话" v-model="cloudSystem.constctsinfo" clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="item">
            <!-- prop="constemail" -->
            <el-form-item label="邮箱:">
              <el-input style="width: 200px" placeholder="请输入邮箱" v-model="cloudSystem.constemail" clearable>
              </el-input>
            </el-form-item>
          </div>
        </div>

        <div class="item" style="width: calc(100% - 20px)" v-show="false">
          <el-form-item label-width="200px" label="系统建设（运维）资金来源:" prop="fundFromRadio">
            <el-radio-group v-model="cloudSystem.fundFromRadio">
              <el-radio label="1">区（县）</el-radio>
              <el-radio label="2">市级</el-radio>
              <el-radio label="3">
                <el-input
                  style="width: 200px"
                  placeholder="请输入其他资金来源"
                  v-model="cloudSystem.fundFrom"
                  clearable
                >
                </el-input>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="是否信创">
            <el-radio-group v-model="cloudSystem.isXc">
              <el-radio label="false">非信创</el-radio>
              <el-radio label="true">信创</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px)">
          <el-form-item style="width: 100%" label-width="200px" label="自行落实部门上云经费:" prop="fundBySelf">
            <el-radio-group v-model="cloudSystem.fundBySelf">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px)">
          <!-- prop="introduction" -->
          <el-form-item style="width: 100%" label="项目简介:">
            <el-input
              type="textarea"
              style="width: 100%"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入项目简介"
              v-model="cloudSystem.introduction"
            >
            </el-input>
          </el-form-item>
        </div>
        <div class="item" style="width: calc(100% - 20px)">
          <el-form-item style="width: 100%" label="申请理由:" prop="remarks">
            <el-input
              type="textarea"
              style="width: 100%"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入申请理由"
              v-model="cloudSystem.remarks"
            >
            </el-input>
          </el-form-item>
        </div>
        <file-list ref="fileList" :fileList="cloudSystem.fileList" @changeFileList="changeFileList" @upload="upload" />
      </el-form>
    </div>
    <div style="display: flex; justify-content: flex-end; margin-top: 10px">
      <el-button type="primary" @click="next">提交</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { cloudUpConfInfo, addCloudUp } from "@/api/cloud/cloud";
import { logicList } from "@/api/basic/services";
import { projectList, AllcloudUpList } from "@/api/cloud/object";
import { treeselect } from "@/api/system/dept";
import { listByCode, serviceByClazz } from "@/api/resources/apply";
import { getDicts } from "@/api/system/dict/data";
import Add from "./add.vue";

import { listUser2 } from "@/api/system/user";
import { uploadFile } from "@/api/system/upload.js";
import fileList from "@/components/FileList/index.vue";
export default {
  name: "AddCloudStstem",
  components: { fileList },
  // props: {
  //     dept: {
  //         type: Array,
  //         default: [],
  //     },
  // },
  data() {
    var validateFundFrom = (rule, value, callback) => {
      if (value === "3") {
        if (this.cloudSystem.fundFrom) {
          callback();
        } else {
          callback(new Error("请输入其他资金来源"));
        }
      } else if (value === "") {
        callback(new Error("请选择系统建设（运维）资金来源"));
      } else {
        callback();
      }
    };
    return {
      //用户列表
      users: [],
      officeId: null,
      cloudSystem: {
        fileList: [],
        projectid: "", //项目id
        supplierCode: "", //云服务商
        supplierName: "", //云服务商名称
        projectname: "", //系统名称
        officeId: "", //业务部门Id
        officeName: "", //业务部门名称
        onlinetime: "", //上线时间
        cloudUpArea: "",
        contacts: "", //联系人id
        contactsNickName: "", //联系人名称
        contactsinfo: "", //联系电话
        email: "", //联系邮箱
        isXc: "",
        protectLevel: "",

        constunit: "", //承建单位
        constcts: "", //承建联系人姓名
        constctsinfo: "", //承建联系方式
        constemail: "", //承建邮箱

        fundFromRadio: "", //系统建设（运维）资金来源选择
        fundFrom: "", //系统建设（运维）资金来源  最终值
        fundBySelf: "false", //自行落实部门上云经费

        introduction: "", //项目简介
        remarks: "", //申请理由
      },
      isIndeterminate: true,
      checkAll: false,
      rules: {
        projectname: [
          {
            required: true,
            message: "请输入系统名称",
            trigger: "blur",
          },
        ],
        officeId: [
          {
            required: true,
            message: "请选择业务部门",
            trigger: "change",
          },
        ],
        supplierCode: [
          {
            required: true,
            message: "请选择云服务商",
            trigger: "change",
          },
        ],
        cloudUpArea: [
          {
            required: true,
            message: "请选择上云区域",
            trigger: "change",
          },
        ],
        onlinetime: [
          {
            required: true,
            message: "请选择上线时间",
            trigger: "change",
          },
        ],
        contacts: [
          {
            required: true,
            message: "请选择业主方联系人",
            trigger: "change",
          },
        ],
        contactsinfo: [
          {
            required: true,
            message: "请输入业主方联系电话",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入业主方联系邮箱",
            trigger: "blur",
          },
        ],

        constunit: [
          {
            required: true,
            message: "请输入承建单位",
            trigger: "blur",
          },
        ],
        constcts: [
          {
            required: true,
            message: "请输入承建方联系人",
            trigger: "blur",
          },
        ],
        constctsinfo: [
          {
            required: true,
            message: "请输入承建方联系人电话",
            trigger: "blur",
          },
        ],
        constemail: [
          {
            required: true,
            message: "请输入承建方联系人邮箱",
            trigger: "blur",
          },
        ],
        isXc: [
          {
            required: true,
            message: "请选择是否为信创",
            trigger: "change",
          },
        ],
        fundBySelf: [
          {
            required: true,
            message: "请选择是否自行落实部门上云经费",
            trigger: "change",
          },
        ],
        introduction: [
          {
            required: true,
            message: "请输入项目简介",
            trigger: "blur",
          },
        ],
        remarks: [
          {
            required: true,
            message: "请输入申请理由",
            trigger: "blur",
          },
        ],
      },
      input2: 0,
      //配置
      configure: {
        available_domain: [], //可用域
        cloud_service_provider: [], //服务商
        storage_type: [], //系统盘类型
        codeList: [], //云服务器规格列表
        czxtList: [], //操作系统列表
        ccList: [], //数据盘类型
        fwcpList: [], //服务型磁盘类型
        wlfwqList: [], //高性能服务器资源类型
        sjkList: [], //数据库类型
        yyaqList: [], //安全产品
      },
      //部门列表树结构
      dept: [],
      projectLists: [],
      // 云服务商列表
      logicListALL: [],
      // 等保列表
      available_domain: [],
      cloud_up_areaList: [],
    };
  },
  created() {
    // 获取项目列表
    projectList({
      pageNum: 1,
      pageSize: 10000000,
    }).then((res) => {
      this.projectLists = res.rows;
    });
    // 获取云服务商列表
    logicList().then((res) => {
      this.logicListALL = res.rows;
    });
    // 获取等保数据
    getDicts("available_domain").then((response) => {
      this.available_domain = response.data;
    });
    getDicts("cloud_up_area").then((response) => {
      this.cloud_up_areaList = response.data;
    });
    // this.getDataOfAdd();
    this.getListDept();
  },
  methods: {
    changeFileList(fileList) {
      this.$set(this.cloudSystem, "fileList", fileList);
    },
    // 云服务商下拉赋值
    changecloudSupplier(data) {
      this.logicListALL.forEach((item) => {
        if (item.cloudSupplier == data) {
          this.cloudSystem.supplierName = item.cloudSupplierName;
        }
      });
    },
    // 项目下拉选择赋值
    changeprojectList(data) {
      this.projectLists.forEach((item) => {
        if (item.id == data) {
          this.users = [];
          this.cloudSystem.contacts = "";
          listUser2({
            deptId: data.officeId,
            pageNum: 1,
            pageSize: 10000000,
          }).then((response) => {
            this.users = response.rows;
          });
          this.cloudSystem.projectname = item.projectname;
          this.cloudSystem.officeId = item.officeId;
          this.cloudSystem.officeName = item.officeName;
          this.cloudSystem.onlinetime = item.onlinetime;
          this.cloudSystem.contacts = item.contacts;
          this.cloudSystem.contactsNickName = item.contactsNickName;
          this.cloudSystem.contactsinfo = item.contactsinfo;
          this.cloudSystem.email = item.email;
          this.cloudSystem.constunit = item.constunit;
          this.cloudSystem.constcts = item.constcts;
          this.cloudSystem.constctsinfo = item.constctsinfo;
          this.cloudSystem.constemail = item.constemail;
          this.cloudSystem.introduction = item.introduction;
          this.cloudSystem.protectLevel = item.protectLevel;
          this.cloudSystem.cloudUpArea = item.cloudUpArea;
          this.cloudSystem.isXc = item.isXc + "";
        }
      });
    },
    //部门列表
    getListDept() {
      treeselect({}).then((response) => {
        this.dept = response.data;
      });
    },
    //获取一些配置数据
    getDataOfAdd() {
      //可用域
      getDicts("available_domain").then((response) => {
        this.configure.available_domain = response.data;
      });
      //服务商
      getDicts("cloud_service_provider").then((response) => {
        this.configure.cloud_service_provider = response.data;
      });
      //盘类型
      serviceByClazz({
        code: "cc",
      }).then((response) => {
        response.data.forEach((item) => {
          if (["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(item.code) < 0) {
            this.configure.storage_type.push(item);
          }
          if (["spycc2"].indexOf(item.code) < 0) {
            this.configure.ccList.push(item);
          }
          if (["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(item.code) < 0) {
            this.configure.fwcpList.push(item);
          }
        });
      });
      //操作系统
      serviceByClazz({
        code: "czxt",
      }).then((response) => {
        this.configure.czxtList = response.data;
      });
      //云服务器规格列表
      listByCode("spec_ecs").then((response) => {
        this.configure.codeList = response.data;
      });
      //高性能服务器资源类型列表
      serviceByClazz({
        code: "wlfwq",
      }).then((response) => {
        this.configure.wlfwqList = response.data;
      });
      //数据库类型列表
      serviceByClazz({
        code: "sjk",
      }).then((response) => {
        this.configure.sjkList = response.data;
      });
      //安全产品列表
      serviceByClazz({
        code: "yyaq",
      }).then((response) => {
        this.configure.yyaqList = response.data;
      });
    },
    next() {
      this.$refs.cloudSystem.validate((valid) => {
        if (valid) {
          this.users.some((item) => {
            if (item.userId == this.cloudSystem.contacts) {
              this.cloudSystem.contactsNickName = item.nickName;
              return true;
            }
          });
          this.$confirm("是否确认提交?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.btnLoading = true;
            this.$refs.fileList.upload();
          });
        } else {
          return false;
        }
      });
    },
    //上传文件回调
    upload(files) {
      if (files) {
        let form = JSON.parse(JSON.stringify(this.cloudSystem));
        form.files = files;
        this.sub(form);
      } else {
        this.btnLoading = false;
      }
    },
    sub(cloudSystem) {
      addCloudUp(cloudSystem)
        .then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
          });
          try {
            this.$store.state.tagsView.visitedViews.splice(
              this.$store.state.tagsView.visitedViews.findIndex((item) => item.path === this.$route.path),
              1
            );
            this.$router.push(
              this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path
            );
          } catch (err) {
            this.$router.push("/index");
          }
        })
        .finally(() => {});
    },
    cancel() {
      try {
        this.$store.state.tagsView.visitedViews.splice(
          this.$store.state.tagsView.visitedViews.findIndex((item) => item.path === this.$route.path),
          1
        );
        this.$router.push(
          this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path
        );
      } catch (err) {
        this.$router.push("/index");
      }
    },
    getName(data, id) {
      data.forEach((item) => {
        if (item.id == id) {
          this.cloudSystem.officeName = item.label;
        } else if (item.children && item.children.length) {
          this.getName(item.children, id);
        }
      });
    },
    //业务部门变化
    deptChange(e) {
      this.users = [];
      this.cloudSystem.contacts = "";
      this.cloudSystem.officeId = "";
      if (e.length) {
        this.cloudSystem.officeId = e[e.length - 1];
        this.getName(this.dept, this.cloudSystem.officeId);
        listUser2({
          deptId: this.cloudSystem.officeId,
          pageNum: 1,
          pageSize: 10000000,
        }).then((response) => {
          this.users = response.rows;
        });
      }
    },
    handleCheckAllChange(val) {
      this.checked = val ? this.options : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
    },
    //清空
    reset() {
      this.$refs.cloudSystem.resetFields();
    },
  },
};
</script>
<style scoped lang="less">
.dialog {
  margin-bottom: 30px;
  font-size: 12px;

  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }

  .msg {
    padding: 0 20px 20px 0px;
    background: #faf9ff;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;

    .wrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      margin-left: 20px;
      width: calc(25% - 20px);
      min-width: 340px;
      display: flex;
    }
  }
}
</style>
